<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link href="favicon.ico" rel="icon" type="image/x-icon" />
		<!-- 导入jquery核心类库 -->
		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
		<!-- 导入easyui类库 -->
		<link id="easyuiTheme" rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="css/default.css">
		<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
		<!-- 导入ztree类库 -->
		<link rel="stylesheet" href="js/ztree/zTreeStyle.css" type="text/css" />
		<script src="js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"></script>
		<script src="js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
		<title>首页练习</title>
		
		<script type="text/javascript">
			
			$(function(){
				/*//显示一个选项卡
				$("#czbkLink").click(function(){
					$("#tt").tabs('add',{
						title:$("#czbkLink").html(),
						href:'http://www.itcast.cn/',
						closable:true
					});
				});*/
				
				
				//显示树形菜单
				//第一步：设置setting属性
				var setting = {
				 	data:{
				 		simpleData:{
				 			enable:true
				 		}
				 	},
				 	callback:{
				 		onClick : function (event, treeId, treeNode, clickFlag) {
				 			var content ='<div style="width:100%;height:100%;overflow:hidden;">'
								+  '<iframe src="'+treeNode.page+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
							
							if(treeNode.page){
								//存在页面
								if($("#tt").tabs('exists',treeNode.name)){
									//选中选项卡
									$("#tt").tabs('select',treeNode.name);
								}else{
									//绑定选项卡
								   	$("#tt").tabs('add',{
										title:treeNode.name,
										content:content,
										closable:true,
									});
								}
								
							}
						   
						}
				 	}
				 }
				//第二部：设置节点关系
				var zNodes = [
					{id:1,pId:0,name:"父节点一"},
					{id:2,pId:0,name:"父节点二"},
					{id:3,pId:0,name:"父节点三"},
					{id:10,pId:1,name:"子节点一"},
					{id:11,pId:1,name:"子节点二"},
					{id:12,pId:1,name:"子节点三"},
					{id:13,pId:2,name:"百度",page:"https://www.baidu.com"},
					{id:14,pId:2,name:"传智播客",page:"http://www.itcast.cn"},
					{id:15,pId:3,name:"子节点六"}
				];
				
				//调用zTree初始化方法
				$.fn.zTree.init($("#baseMenu"), setting, zNodes);
				
				
				//添加右键事件
				$("#tt").tabs({
					onContextMenu:function(e, title,index){
						//阻止浏览器默认菜单
						e.preventDefault();
						
						//alert(e+" "+title+"  "+index);//e 是jQuery标准事件对象 title是标签名 index是标签索引
						//显示菜单
						$('#mm').menu('show', { 
							left : e.pageX,
							top : e.pageY
						});


					}
				});
				
				//为菜单项添加点击事件
				/*$("#closeThis").click(function(){
					var obj = $("#mm").menu('options');
					alert(obj.name);
				});*/
				//菜单的单击事件
				$('#mm').menu({ 

					onClick:function(item){ 
						closeTab(item,item.name)
					
					} 
					
				}); 
				
				//删除tabs的方法
				//删除Tabs
        function closeTab(menu, type) {
            var allTabs = $("#tt").tabs('tabs');
            var allTabtitle = [];
            //var curTabTitle;
             var curTab;
            $.each(allTabs, function (i, n) {
                var opt = $(n).panel('options');
                if (opt.closable)
                    allTabtitle.push(opt.title);
                    
                if (opt.selected)
                	curTab = opt.title;
            });
            
            //var curTab = $("#tt").tabs('getSelected');
         	//curTabTitle = curTab.title;
            /*var curTabTitle = $(menu).data("tabTitle");*/
            //var curTabIndex = $("#tt").tabs("getTabIndex",curTab);
            switch (type) {
                case "1"://关闭当前
                    $("#tt").tabs("close", curTab);
                    return false;
                    break;
                case "2"://全部关闭
                    for (var i = 0; i < allTabtitle.length; i++) {
                        $('#tt').tabs('close', allTabtitle[i]);
                    }
                    break;
                case "3"://除此之外全部关闭
                    for (var i = 0; i < allTabtitle.length; i++) {
                        if (curTab != allTabtitle[i])
                            $('#tt').tabs('close', allTabtitle[i]);
                    }
                    $('#tt').tabs('select', curTab);
                    break;
                /*case 4://当前侧面右边
                    for (var i = curTabIndex; i < allTabtitle.length; i++) {
                        $('#tt').tabs('close', allTabtitle[i]);
                    }
                    $('#tt').tabs('select', curTabTitle);
                    break;
                case 5: //当前侧面左边
                    for (var i = 0; i < curTabIndex - 1; i++) {
                        $('#tt').tabs('close', allTabtitle[i]);
                    }
                    $('#tt').tabs('select', curTabTitle);
                    break;
                case 6: //刷新
                    var panel = $("#tt").tabs("getTab", curTabTitle).panel("refresh");
                    break;*/
            }

        }

			});
		</script>
	</head>
	<body>
		
		<div id="cc" class="easyui-layout" data-options="fit:true" style="width:600px;height:400px;"> 

			<div data-options="region:'north',split:true" style="height:80px;">
				<img style="margin-top: 10px;" src="images/logo.png" />
				
				<div style="position: absolute;right: 5px; top: 10px;">
					[<strong>超级管理员</strong>]，欢迎你！您使用[<strong>192.168.1.100</strong>]IP登录！
				</div>
				<div  style="position: absolute;right: 5px; top: 40px;">
					<a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#mm',iconCls:'icon-ok'">更换皮肤</a>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#mm',iconCls:'icon-help'">控制面板</a>
				</div>
			</div> 
			
			<div data-options="region:'south',split:true" style="height:50px;">
				<table>
					<tr>
						<td style="width: 400px;">
							<div style="color: #999; font-size: 8pt;position: absolute;top: 10px;left: 10px;" >
								BOSv2.0综合物流管理平台 | Powered by <a href="http://www.itcast.cn/">传智播客</a>
							</div>
						</td>
						<td style="width: *;" class="co1">
							<div style="position: absolute;top:10px">
								<span id="online" style="background: url(./images/online.png) no-repeat left;padding-left:18px;margin-left:3px;font-size:8pt;color:#005590;">在线人数:1</span>
							</div>
						</td>
					</tr>
				</table>
				
			</div> 
			
			
			<div data-options="region:'west',title:'菜单导航',split:true" style="width:180px;">
				<!--可折叠-->
				<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" data-options="fit:true"> 
	
					
					
					<div title="基本功能" id="zt1"> 
					<ul id="baseMenu" class="ztree"></ul>
					
					</div> 
					<div title="系统管理"> 
					
					content3 
					
					</div> 
				
				</div> 
	
	
				
			</div> 
			
			<div data-options="region:'center',title:'消息中心'" style="padding:5px;background:#eee;">
				<div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options= "fit:true"> 
					
				</div> 

			</div> 
			
		</div>
	
		<div id="mm" class="easyui-menu" style="width:120px;"> 
			
			<div id="closeThis" name="1">关闭当前窗口</div> 
			<div id="closeOther" name="3">关闭其他窗口</div> 
			<!--这是分割线-->
			<div class="menu-sep"></div> 
			<div data-options="iconCls:'icon-cancel'" id="closeAll" name="2">关闭所有窗口</div> 
			
		</div>

		
	</body>
</html>
